<template>
	<view>
		<scroll-view scroll-y class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tablist" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
			<view class="tab_content" v-show="TabCur==1">
				<view class="cu-list menu">
					<view class="cu-item" :class="'arrow'" @tap="openurl('sjcx')">
						<view class="content">
							<text class="cuIcon-search text-cyan"></text>
							<text class="text-grey">数据监测{{test}}</text>
						</view>
					</view>
					<view class="cu-item" :class="'arrow'" @tap="openurl('videolist')">
						<view class="content">
							<text class="cuIcon-search text-cyan"></text>
							<text class="text-grey">视频监测</text>
						</view>
					</view>
					<view class="cu-item" :class="'arrow'" @tap="openurl('jwcx')">
						<button class="cu-btn content" open-type="contact">
							<text class="cuIcon-search text-cyan"></text>
							<text class="text-grey">积温监测</text>
						</button>
					</view>
				</view>
			</view>
			<view class="tab_content" v-show="TabCur==0">
				<form>
					<view class="cu-form-group margin-top">
						<view class="title">农场名称</view>
						<picker @change="PickerChange1" range-key="nc_mc" :value="sel1"  :range="ncpicker">
							<view class="picker">
								{{sel1>-1?ncpicker[sel1].nc_mc:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">管理区名称</view>
						<picker @change="PickerChange2"  mode = 'selector' range-key="glq_mc" :value="sel2"  :range="glqpicker">
							<view class="picker" v-if='glqpicker.length>0'>
								{{sel2>-1&&glqpicker[sel2].glq_mc?glqpicker[sel2].glq_mc:'请先选择农场名称'}}
							</view>
						</picker>
						<view v-if='glqpicker.length==0' class="deftxt">请先选择农场名称</view>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title">监测类型</view>
						<picker @change="PickerChange3" range-key="name" :value="sel3"  :range="lxpicker">
							<view class="picker">
								{{sel3>-1?lxpicker[sel3].name:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="padding">
						<button @click='ztjccx' class="cu-btn block bg-blue margin-tb-sm lg">查询</button>
					</view>
				</form>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>{{lxpicker[sel3]?lxpicker[sel3].name:''}}折线图
					</view>
				</view>
				<view class="qiun-columns">
					<view class="qiun-charts">
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {getncxxlist,getglqxxlist,getsydkjc} from '../api/api.js'
	import uCharts from '../../common/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	let echartsLists=[];
	export default {
		data() {
			return {
				sel1: -1,
				sel2: -1,
				sel3: -1,
				TabCur: 0,
				scrollLeft: 0,
				test:'',
				tablist: [ '整体监测','地块监测'],
				ncpicker:[],
				glqpicker:[],
				lxpicker:[
					{
					ids:1,
					name:'叶龄'
				},
				{
					ids:2,
					name:'叶长'
				},
				{
					ids:3,
					name:'分蘖数'
				},
				{
					ids:4,
					name:'有效光合面积'
				},
				{
					ids:5,
					name:'叶色（饱和度）'
				},
				{
					ids:6,
					name:'叶色（色度）'
				},
				{
					ids:7,
					name:'空气温度'
				},
				{
					ids:8,
					name:'空气湿度'
				},
				{
					ids:9,
					name:'土壤温度'
				},
				{
					ids:10,
					name:'土壤湿度'
				},
				{
					ids:11,
					name:'光照度'
				},
				{
					ids:12,
					name:'冠层下温度'
				},
				{
					ids:13,
					name:'冠层下湿度'
				},{
					ids:14,
					name:'泥温'
				},{
					ids:15,
					name:'水温'
				},
				],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				text:'',
				echartsList:echartsLists[0]
				};
			},
			onShow() {
				let _this=this;
					//判断当前状态是否
					var useID = uni.getStorageSync('useID');
					if (!useID) {
						uni.reLaunch({
							url: '/pages/logo/logo'
						});
						return
					} else {
						_self = this;
						this.cWidth = uni.upx2px(750);
						this.cHeight = uni.upx2px(500);
					}
                    //this.getServerData();
					getncxxlist(      //农场数据
						function(res){
							_this.ncpicker=res.data.returnData.ncxxlb||[];
						}
					)		
				},
				methods: {
					ztjccx(){
						if((this.glqpicker[this.sel2]&&this.glqpicker[this.sel2].glq_bh) && (this.lxpicker[this.sel3]&&this.lxpicker[this.sel3].ids)){
							let parm={jd_bh:this.glqpicker[this.sel2].glq_bh,cx_type:this.lxpicker[this.sel3].ids}
							getsydkjc(parm,res=>{
								this.setechartData(res.data.returnData) 
							})
						}else{
							uni.showModal({
							    title: '提示',
							    content: '请先选择管理区和监测类型',
								showCancel:false
							});
						
						}
						
					},
					tabSelect(e) {
						this.TabCur = e.currentTarget.dataset.id;
						this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60

					},
					setselback(){
					
						this.sel2= -1;
						this.sel3= -1;
						this.glqpicker=[];
				
					},
					PickerChange1(e) {
						let _this=this
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel1 = e.detail.value;
						this.setselback()
					    let parm ={
							cx_ssnc:this.ncpicker[this.sel1].nc_bh
						} 
						getglqxxlist(      //管理区数据
							parm,
							function(res){
								_this.glqpicker=res.data.returnData.glqxxlb
								//_this.glqpicker = Object.assign({},_this.glqpicker)
								_this.$set(_this.glqpicker,res.data.returnData.glqxxlb)
							}
						)
					},
					PickerChange2(e) {
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel2 = e.detail.value
					},
					PickerChange3(e) {
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel3 = e.detail.value;
					},
					
					setechartData(data) {
						let LineA = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories = data.dk_mc;
						LineA.series =[{
							"name": this.lxpicker[this.sel3].name,
							"data": data.dk_value
						}];
						_self.showLineA("canvasLineA", LineA);
					},
					showLineA(canvasId, chartData) {
						canvaLineA = new uCharts({
								$this:_self,
								canvasId: canvasId,
								type: 'line',
								fontSize:11,
								legend: {
									show: true,
									float:'center',
									lineHeight:20,
									itemGap:20
								},
								dataLabel:false,
								dataPointShape:true,
								background:'#FFFFFF',
								pixelRatio:_self.pixelRatio,
								categories: chartData.categories,
								series: chartData.series,
								animation: true,
								xAxis: {
									type:'grid',
									gridColor:'#CCCCCC',
									gridType:'dash',
									dashLength:8
								},
								yAxis: {
									gridType:'dash',
									gridColor:'#CCCCCC',
									dashLength:8,
									splitNumber:5,
									format:(val)=>{return val.toFixed(0)}
								},
								width: _self.cWidth*_self.pixelRatio,
								height: _self.cHeight*_self.pixelRatio,
								extra: {
									line: {
										type: 'curve'
									}
								}
						});
					},
					touchLineA(e) {
						canvaLineA.showToolTip(e, {
							format: function(item, category) {
								return category + ' ' + item.name + ':' + item.data
							}
						});
					},
					openurl(url) {
						uni.navigateTo({
							url: url
						});
					}
				}
		}
</script>

<style scoped>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css"; 

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.tab_content {
		padding-bottom: 100upx;
	}
</style>
